<template>
    <div class="coo-list-wrap filter-form">
        <div>
            <div class="condition">
                <el-button type="primary">灾备测试</el-button>
                <el-button type="primary">恢复</el-button>
            </div>
            <div class="table-container">
                <el-table v-loading="loading" :border="true" :data="tableData"  height="680px" :header-cell-style="{background:'#D8E8FF'}">
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="name" label="测试场景"  width="240" align="center" min-width="200" />
                    <el-table-column prop="aim" label="测试目的"  width="220" align="center" min-width="200" />
                    <el-table-column prop="start_time" label="备份开始时间" width="220" align="center" />
                    <el-table-column prop="end_time" label="备份结束时间" width="220" align="center" />
                    <el-table-column prop="type" label="恢复时间目标" width="220" align="center" />
                    <el-table-column prop="strategy" label="恢复策略" width="220" align="center" />
                    <el-table-column prop="status" label="测试结果" width="220" align="center" />
                </el-table>
                <div class="pagination-container">
                    <pagination-control
                        :paging-params="pagingParams"
                        @onCurrentPage="handleCurrentChange"
                        @onCurrentSize="handleSizeChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PaginationControl from "@/layout/paginationControl.vue"
  
export default {
    components: {
        PaginationControl,
    },
    data: function() {
        return {
            pagingParams: {
                page: 1,
                size: 20,
                total: 5
            },
            queryParams: {
                db_type: null,
            },
            typeList: {
                10: "Oracle",
                20: "MySQL",
                30: "redis",
            },
            backup_db: 3,
            dbList: {
                1: "stback01",
                2: "pgstb02",
                3: "pg12stb01",
            },
            tableData: [
                {
                    "name": "tsds-test-ulockpqihme",
                    "start_time": "2024-10-20 10:00:24",
                    "end_time": "2024-10-20 10:10:24",
                    "status": "备份完成",
                    "type": "1s",
                    "aim": "验证备份的完整性",
                    "strategy": "完全恢复",
                },
                {
                    "name": "tsds-test-qhjejqxusa",
                    "start_time": "2024-10-20 11:00:24",
                    "end_time": "2024-10-20 11:10:24",
                    "status": "备份完成",
                    "type": "5s",
                    "aim": "恢复点目标",
                    "strategy": "时间点恢复",
                },
                {
                    "name": "tsds-test-nlqkugreha",
                    "start_time": "2024-10-20 12:00:24",
                    "end_time": "2024-10-20 12:10:24",
                    "status": "备份完成",
                    "type": "16s",
                    "aim": "验证备份的完整性",
                    "strategy": "完全恢复",
                },
                {
                    "name": "tsds-test-fqrhreha",
                    "start_time": "2024-10-20 13:00:24",
                    "end_time": "2024-10-20 13:10:24",
                    "status": "备份完成",
                    "type": "2s",
                    "aim": "验证备份的完整性",
                    "strategy": "完全恢复",
                },
                {
                    "name": "tsds-test-aorrkuaeza",
                    "start_time": "2024-10-20 14:00:24",
                    "end_time": "2024-10-20 14:10:24",
                    "status": "备份完成",
                    "type": "5s",
                    "aim": "恢复点目标",
                    "strategy": "增量恢复",
                },
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    // position: relative;
    background-color: #fff;
    .title {
        color: #333333;
        font-size: 18px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 20px;
    }
    .table-container {
        padding: 0px 30px;
        .el-table {
            font-size: 12px !important;
        }
    }
    .condition {
        padding: 30px;
        display: flex;
    }
    ::v-deep {
		.condition {
			.el-form-item {
				margin-bottom: 0;
				padding-top: 6px;
				padding-bottom: 6px;
                height: 32px;
			}
			.el-form-item__label {
				font-size: 12px;
				font-weight: normal;
			}
            .el-input__icon {
                line-height: 32px;
            }
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
}
.el-button {
    border-radius: 5px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--warning{
        background: #ec821f;
    }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
    thead {
        th{
            div{
            // font-weight: 700;
            // font-size: 20px;
            color: #333333
            }
        }
    }
}
</style>